
<!-- 声明当前 Html 的版本号 -->
<!DOCTYPE html>
<!-- lang 声明当前 html 的使用语言 en: 英语-->
<html lang="en">
<!-- head 头部标签,用来设置当前网页的标题和编码格式 -->
<head>
	<!-- utf-8 国际通用的编码格式 -->
	<meta charset="UTF-8">
	<!-- title 用来设置网页标题 -->
	<title>Document</title>
	<!-- style 设置标签的样式 -->
	<style>
	/*为id名为a的div设置css样式*/
	#a{
		/*背景色*/
    background-color: red;
    /*宽*/
    width: 300px;
    /*高*/
    height: 50px;
    /*字体大小*/
    font-size: 40px;
	}
	
	</style>
</head>
<!-- body 网页的身体部分,该网页显示的内容部分都写在该标签下 -->
<body>
	<!-- html 的基础标签:
	1.单标签<meta>
	2.双标签<title></title>
	区分:看是否有内容部分,如果有 则是双标签,反之,是单标签 -->
	<!-- 1 a标签 超链接标签
	作用: 用来跳转网页的; -->
	<a href="https://www.baidu.com/">百度</a>
	<!-- ### 代表空连接 -->
    <a href="###">京东</a>

    <!-- 2.h1~h6 六级标题标签 -->
    <h1>启龙相亲</h1>
    <h2>李坤娶媳妇儿</h2>
    <h3>凤姐不愿意</h3>
    <h4>张志勇抢亲</h4>
    <h5>许广宇伴郎</h5>
    <h6>勇敢伴郎</h6>
    <!-- h1到h4最常用标签 -->
    <!-- emmet 插件的使用 -->
    <!-- h1*数字+tab -->
    <!-- h1{童生}*4+tab -->
    <!-- h${NBA$}*6+tab -->
    <h1>NBA1</h1>
    <h2>NBA2</h2>
    <h3>NBA3</h3>
    <h4>NBA4</h4>
    <h5>NBA5</h5>
    <h6>NBA6</h6>

    <!-- 3.p标签 段落标签 -->
    <p> 海涛吃鸡海涛吃鸡海涛吃鸡海涛吃鸡海涛吃鸡</p>
    <!-- 4.strong 标签 加粗 -->
    <!-- br 换行 -->
    <br>
    <!-- hr 水平分割线 -->
    <hr>	
    <strong> 海涛吃鸡</strong>
    <!-- 5.em 斜体字 -->
    <em> 海涛吃鸡</em>
    <!-- 6.列表标签 -->
    <!-- ul li 配合使用 无序列表 -->
    <!-- li 作为列表项 -->
    <ul>
    	<li>NBA</li>
    	<li>八卦</li>
    	<li>拔罐</li>
    	<li>屌丝</li>
    </ul>
    <!-- ol li 配合使用 有序列表 -->
    <!-- ol+tab li{屌丝$号}*4 -->
    <ol>
    	<li> 屌丝1号</li>
    	<li> 屌丝2号</li>
    	<li> 屌丝3号</li>
    	<li> 屌丝4号</li>
    </ol>
    <!-- emmet 插件 -->
    <!-- ol>li*4+tab -->
    <!-- 7.img 图片标签,用来展示图片的 -->
    <!-- src: 设置图片路径 -->
    <!-- art 属性作用:当前图片未加载成功时,{网络不佳或者路径错误}设置的提示语部分 -->
    <!-- title作用: 当鼠标移入该图片时,提示的文字介绍部分 -->
    <!-- a.加载网络图片,直接设置图片地址 -->
    <img src="http://img3.xiazaizhijia.com/walls/20160708/mid_2f172c09d079701.jpg" alt="">
    <img src="123.jpg" alt=""> 
    <img src="imgs/2.jpeg" alt="">
    <img src="../1.jpeg" alt="">
    <!-- 如何获取图片路径: -->
    <!-- 1.当前图片和当前文件在同一路径 ,直接src访问图片名 -->
    <!-- 2.当前图片在当前文件的下一级,用/获取下一级目录来访问图片名 -->
    <!-- 3.当前图片在当前图片的上一级,用../获取上一级目录来访问图片名 -->
    <!-- div无语义标签 网页布局-->
    <div id="a">网页布局</div>

     
	



</body>
</html>